<template>
  <div class="detail">
    <content />
    <div class="likes">
      <div class="left">
        <i class="heart-icon" />
      </div>
      <div class="right">
        <div class="image" v-for="(item, index) in arr" :key="index"></div>
      </div>
    </div>
    <SetttingModal />
  </div>
</template>

<script setup>
import content from '../../components/content.vue'
import SetttingModal from '../SetttingModal/index.vue'
import { reactive } from 'vue'

const arr = reactive(new Array(52).fill(0))
</script>
<style lang="scss" scoped>
.detail {
  margin: 10px;
}
.likes {
  display: flex;
  background-color: #f7f7f7;
  border-radius: 5px;
  padding: 0.5em;
  .left {
    width: 2em;
    .heart-icon {
      display: inline-block;
      margin-top: 0.5em;
      width: 20px;
      height: 20px;
      background: url('../../assets/heart-icon.svg') no-repeat;
      background-size: contain;
    }
  }
  .right {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(7, 2.6em);
    grid-template-rows: repeat(7, 2.6em);
    .image {
      display: inline-block;
      width: 2.5em;
      height: 2.5em;
      background: #000;
      border-radius: 5px;
    }
  }
}
</style>
